<template>
    <div>
        <el-form :data="list">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="descriptionData.name" />
            </el-form-item>

            <el-form-item label="上级分类" prop="list">
                <el-select placeholder="无上级分类" v-model="selectId">
                    <el-option v-for="item in list" :key="item.id" :label="item.keywords" :value="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="数量单位" prop="name" >
                    <el-input v-model="descriptionData.productUnit" />
            </el-form-item>
            <el-form-item label="排序" prop="name">
                <el-input  v-model="descriptionData.sort"/>
            </el-form-item>

            <el-form-item label="是否显示" prop="resource">
            <el-radio-group v-model="descriptionData.showStatus">
                <el-radio label="0" >是</el-radio>
                <el-radio label="1" >否</el-radio>
            </el-radio-group>
            </el-form-item>

            
            <el-form-item label="是否显示在导航栏" prop="resource" >
            <el-radio-group v-model="descriptionData.navStatus">
                <el-radio label="0"  >是</el-radio>
                <el-radio label="1" >否</el-radio>
            </el-radio-group>
            </el-form-item>

            <el-form-item label="帅选属性" prop="region">
                <el-cascader :options="listData"/>
            </el-form-item>

            <el-form-item label="关键词" prop="name">
                    <el-input v-model="descriptionData.keywords" />
            </el-form-item>

            <el-form-item label="分类描述" prop="desc">
                <el-input type="textarea" v-model="descriptionData.description" />
            </el-form-item>
             <el-form-item>
                <el-button type="primary" @click="submitForm(descriptionData)">
                    提交
                </el-button>
                <el-button @click="resetForm(descriptionData)">重置</el-button>
             </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
// 导入ref
import type { Ref } from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute()
import { ElMessageBox,ElMessage } from 'element-plus'
import type { Action } from 'element-plus'
import router from '@/router'

// 导入接口
import {
    addproductCategoryList,
    productCategoryList,
    productCategoryListFound,
    categoryList,
    productCategoryCreate,
    
    

} from '@/api/admin'
// 导入类型
import {adminListData,
    productCategoryListData,
    productCategoryListFoundindy,
    productCategoritys,
    
} from '@/utils/adminType'

// 表单类型

// 定义表单数据类型
const descriptionData:Ref<productCategoritys> = ref({
    description:'',
    icon:'',
    keywords:'',
    productArrtributeIdList:[],
    name:'',
    navStatus:0,
    parentId:0,
    productUnit:'',
    showStatus:0,
    sort:0,

})


const list: Ref<productCategoryListFoundindy[]> = ref([]);
const selectId = ref(1)
const num = ref(0)
let options = ref([

])
getList()
function getList(){
    console.log(route.params.id);
    let id = route.params.id
    
    productCategoryList({
        pageNum:1,
        pageSize:100
    }).then(res =>{
        list.value = res.data.list
        
    })
}

// 第2个、
const listData: Ref<productCategoritys[]> = ref([]);
function prodenitcy():void{
    categoryList().then((res:any)=>{
        listData.value= res.data
        
        
    })
}
prodenitcy()
const objPage:Ref<adminListData> = ref({
    pageNum:1,
    pageSize:5,
    keyword:""
})

// 分类
// 提交

function submitForm(descriptionDatas:productCategoritys):void{;
    console.log(descriptionDatas);
    
    ElMessageBox.confirm(
    '是否提交数据',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      callback: (action: Action) => {
       if(action == 'confirm'){
            // console.log('点击了确定');
            // 发送删除用户请求
            productCategoryCreate(descriptionDatas).then((res:any)=>{
               if(res.code === 500){
                ElMessage({
                    type: 'error',
                    message: res.message,
                })
               }
                
            })
       }
        
    },
    }
  )

}
// 重置
function resetForm(descriptionDatas:productCategoritys):void{
  
    descriptionData.value.description='';
    descriptionData.value.icon='';
    descriptionData.value.keywords='';
    descriptionData.value.productArrtributeIdList=[];
    descriptionData.value.name=''
    descriptionData.value.navStatus=0
    descriptionData.value.parentId=0
    descriptionData.value.productUnit=''
    descriptionData.value.showStatus=0
    descriptionData.value.sort=0

}
 

</script>
<style lang="scss">
    el-form{
        width: 900px;
        margin: 0 auto;
    }
</style>